<template>
    <div>
      <!--参数切换-->
      <div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"
                 style="margin-top: 10px;margin-left: 10px;width: auto;">
          <!--流体参数-->
          <el-tab-pane label="流体参数" name="fluidData">
            <div style="margin-top: 20px;margin-left:-40px">
              <el-form ref="form" label-width="40px">
                <el-form-item style="margin-left: 13px">
                  <h2>
                    <i class="el-icon-paperclip"></i>
                    参数管理:
                  </h2>
                </el-form-item>
                <!--下拉框-->
                <el-form-item visable="false">
                  <el-card class="box-card">
                    <router-view></router-view>
                  </el-card>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <!--密度-->
          <el-tab-pane label="密度" name="density">
            <div style="margin-top: 20px;margin-left:-40px">
              <el-form ref="form" label-width="40px">
                <el-form-item style="margin-left: 13px">
                  <h2>
                    <i class="el-icon-paperclip"></i>
                    密度输入:
                  </h2>
                </el-form-item>
                <!--密度输入方式下拉框-->
                <el-form-item >
                  <el-col :span="5">
                    <el-form-item label="输入方式" label-width="80px">
                      <el-select v-model="densityInputModel" placeholder="请选择" @change="selectLiquidDensityInputModel">
                        <el-option
                          v-for="item in liquidDensityInputModel"
                          :key="item.id"
                          :label="item.inputModel"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item visable="false">
                  <el-card class="box-card" style="width: auto">
                    <router-view></router-view>
                  </el-card>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <!--粘度-->
          <el-tab-pane label="粘度" name="viscosity">
            <div style="margin-top: 20px;margin-left:-40px">
              <el-form ref="form" label-width="40px">
                <el-form-item style="margin-left: 13px">
                  <h2>
                    <i class="el-icon-paperclip"></i>
                    粘度输入:
                  </h2>
                </el-form-item>
                <!--粘度输入方式下拉框-->
                <el-form-item >
                  <el-col :span="5">
                    <el-form-item label="输入方式" label-width="80px">
                      <el-select v-model="viscosityInputModel" placeholder="请选择" @change="selectLiquidViscosityInputModel">
                        <el-option
                          v-for="item in liquidViscosityInputModel"
                          :key="item.id"
                          :label="item.inputModel"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item visable="false">
                  <el-card class="box-card" style="width: auto">
                    <router-view></router-view>
                  </el-card>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <!--饱和蒸气压-->
          <el-tab-pane label="饱和蒸气压" name="saturatedVaporPressure">
            <div style="margin-top: 20px;margin-left:-40px">
              <el-form ref="form" label-width="40px">
                <el-form-item style="margin-left: 13px">
                  <h2>
                    <i class="el-icon-paperclip"></i>
                    饱和蒸气压输入:
                  </h2>
                </el-form-item>
                <!--饱和蒸气压输入方式下拉框-->
                <el-form-item >
                  <el-col :span="5">
                    <el-form-item label="输入方式" label-width="80px">
                      <el-select v-model="vaporInputModel" placeholder="请选择" @change="selectLiquidVaporInputModel">
                        <el-option
                          v-for="item in liquidVaporInputModel"
                          :key="item.id"
                          :label="item.inputModel"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item visable="false">
                  <el-card class="box-card" style="width: auto">
                    <router-view></router-view>
                  </el-card>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <!--比热容-->
          <el-tab-pane label="热容" name="heatCapacity">
            <div style="margin-top: 20px;margin-left:-40px">
              <el-form ref="form" label-width="40px">
                <el-form-item style="margin-left: 13px">
                  <h2>
                    <i class="el-icon-paperclip"></i>
                    热容输入:
                  </h2>
                </el-form-item>
                <!--热容输入方式下拉框-->
                <el-form-item >
                  <el-col :span="5">
                    <el-form-item label="输入方式" label-width="80px">
                      <el-select v-model="heatCapacityInputModel" placeholder="请选择" @change="selectLiquidHeatCapacityInputModel">
                        <el-option
                          v-for="item in liquidHeatCapacityInputModel"
                          :key="item.id"
                          :label="item.inputModel"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item visable="false">
                  <el-card class="box-card" style="width: auto">
                    <router-view></router-view>
                  </el-card>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
  export default {
    name: "fluid",
    data(){
      return{
        activeName: 'fluidData',
        densityInputModelId:1,
        densityInputModel:'常量',
        viscosityInputModelId:1,
        viscosityInputModel:'常量',
        vaporInputModelId:1,
        vaporInputModel:'常量',
        heatCapacityInputModelId:1,
        heatCapacityInputModel:'常量',
        liquidDensityInputModel:[
          {
            id:1,
            inputModel:'常量',
          },{
            id:2,
            inputModel:'密温曲线',
          },{
            id:3,
            inputModel:'多项式',
          },{
            id:4,
            inputModel:'相对密度公式',
          },
        ],
        liquidViscosityInputModel:[
          {
            id:1,
            inputModel:'常量',
          },{
            id:2,
            inputModel:'粘温曲线',
          },
        ],
        liquidVaporInputModel:[
          {
            id:1,
            inputModel:'常量',
          },{
            id:2,
            inputModel:'饱和蒸气压+温度曲线',
          },
        ],
        liquidHeatCapacityInputModel:[
          {
            id:1,
            inputModel:'常量',
          },{
            id:2,
            inputModel:'饱和蒸气压+温度曲线',
          },
        ],
        /*接受参数*/
        liquidDensityData:'',
      }
    },
    mounted() {
    },
    methods:{
      handleClick(tab){
        if (tab.name == "fluidData"){
          this.$router.push({path: '/fluidDensityInputModel4'})
        }else if (tab.name == "density"){
          this.initLiquidDensityData();
        }else if (tab.name == "viscosity"){
          this.$router.push({path: '/fluidViscosityInputModel'+ String(this.viscosityInputModelId)})
        }else if (tab.name == "saturatedVaporPressure"){
          this.$router.push({path: '/fluidVaporInputModel'+ String(this.vaporInputModelId)})
        }else if (tab.name == "heatCapacity"){
          this.$router.push({path: '/fluidHeatCapacityInputModel'+ String(this.heatCapacityInputModelId)})
        }
      },
      selectLiquidViscosityInputModel(value){
        this.viscosityInputModelId = value;
        //console.log(this.densityInputModelId);
        this.$router.push({path: '/fluidViscosityInputModel'+ String(this.viscosityInputModelId)})
      },
      selectLiquidVaporInputModel(value){
        this.vaporInputModelId = value;
        //console.log(this.densityInputModelId);
        this.$router.push({path: '/fluidVaporInputModel'+ String(this.vaporInputModelId)})
      },
      selectLiquidHeatCapacityInputModel(value){
        this.heatCapacityInputModelId = value;
        //console.log(this.densityInputModelId);
        this.$router.push({path: '/fluidHeatCapacityInputModel'+ String(this.heatCapacityInputModelId)})
      },

      /*密度参数的初始化和切换值类型*/
      selectLiquidDensityInputModel(value){
        this.liquidDensityData.densityValueId = value;
        console.log(this.liquidDensityData.densityValueId);
        this.putRequest("/api/management/liquid/density/test/", this.liquidDensityData).then(resp => {
          if (resp) {
            this.initLiquidDensityData();
          }
        });
      },
      initLiquidDensityData(){
        this.getRequest("/api/management/liquid/density/test/" + 1).then(resp => {
          if (resp) {
            window.sessionStorage.setItem("liquidDensityData",JSON.stringify(resp));
            this.liquidDensityData = resp;
            this.densityInputModelId = this.liquidDensityData.densityValueId;
            console.log(this.liquidDensityData);
            if (this.liquidDensityData.densityValueId == 1){
              this.densityInputModel = '常量';
            }else if (this.liquidDensityData.densityValueId == 2){
              this.densityInputModel = '密温曲线';
            }else if (this.liquidDensityData.densityValueId == 3){
              this.densityInputModel = '多项式';
            }else if (this.liquidDensityData.densityValueId == 4){
              this.densityInputModel = '相对密度公式';
            }
            this.$router.push({path: '/fluidDensityInputModel'+ String(this.densityInputModelId)});
            console.log(this.densityInputModelId);
            console.log(this.densityInputModel);
          }
        });
      },
    },
  }
</script>

<style scoped>

</style>
